<!--
 * @Author: CHINAKAIYUAN<sunkaiyuan@namenode.cn>
 * @Date: 2022-02-03 14:41:20
 * @LastEditTime: 2023-08-31 11:00:35
 * @LastEditors: 孙开源 && sunkaiyuan@namenode.cn
 * @Description:   :gridOps="gridOptions" other
-->

<template>
  <sc-VxeTable
    ref="xGrid"
    :gridEvts="gridEvents"
    :gridOps="gridOps"
    :tablecode="'pro_opencard_details'"
    :url="api.pro.OpenCard.details"
  >
  </sc-VxeTable>
  <save-dig
    v-if="dialog.save"
    ref="save"
    @success="handleSuccess"
    @closed="dialog.save = false"
  ></save-dig>
  <savepro
    v-if="dialog.savepro"
    ref="saveproD"
    @success="handleSuccess"
    @closed="dialog.savepro = false"
  ></savepro>
  <setCraft
    v-if="dialog.setCraft"
    ref="setCraftDlg"
    @success="handleSuccess"
    @closed="dialog.setCraft = false"
  ></setCraft>
  <editBom
    v-if="dialog.editBom"
    ref="editBomDlg"
    @success="handleSuccess"
    @closed="dialog.editBom = false"
  ></editBom>
  <editBom
    v-if="dialog.editBom"
    ref="editBomDlg"
    @success="handleSuccess"
    @closed="dialog.editBom = false"
  ></editBom>
  <viewprocess
    v-if="dialog.viewprocess"
    ref="viewprocessDlg"
    @closed="dialog.viewprocess = false"
  ></viewprocess>
</template>

<script>
export default {
  name: "pro_opencard_details",
};
</script>

<script setup>
import { nextTick, ref } from "vue";
import saveDig from "./edit";
import savepro from "./save";
import setCraft from "./setCraft";
import editBom from "./editbom";
import viewprocess from "./view_process";

import api from "@/api";
import tool from "@/utils/tool";
const dialog = ref({
  save: false,
  savepro: false,
  setCraft: false,
  editBom: false,
  viewprocess: false,
});
const xGrid = ref({});
const save = ref({});
const saveproD = ref({});
const setCraftDlg = ref({});
const editBomDlg = ref({});
const viewprocessDlg = ref({});

const handleSuccess = () => {
  dialog.value.save = false;
  dialog.value.savepro = false;
  xGrid.value.refresh();
};
const gridOps = {
  columns: [
    {
      field: "company_name",
      className: "red",
    },
    {
      field: "process.name",
      className: "red",
    },
    {
      field: "material.name",
      className: "blue",
    },
  ],
  rowClassName: ({ row }) => {
    let time = new Date(row.potdate).getTime();
    let nowtime = new Date(tool.SYS_DATE()).getTime();
    if (time == nowtime) return "backgroudYellow";
  },
};
const edit = function (row) {
  dialog.value.save = true;
  nextTick(() => {
    save.value.setData(row).open();
  });
};
const editItem = function (id) {
  dialog.value.savepro = true;
  nextTick(() => {
    saveproD.value.setData(id).open();
  });
};
const viewpro = function (id) {
  dialog.value.viewprocess = true;
  nextTick(() => {
    viewprocessDlg.value.setData({ open_card_id: id });
    viewprocessDlg.value.open();
  });
};
const gridEvents = {
  cellDblclick: function ({ row }) {
    editItem(row.main_id);
  },
  edit: function ({ button }) {
    edit(button.selectRecords[0]);
  },
  editItem: function ({ button }) {
    editItem(button.selectRecords[0].main_id);
  },
  viewpro: function ({ button }) {
    viewpro(button.selectRecords[0].id);
  },
  setCraft: function ({ button }) {
    dialog.value.setCraft = true;
    nextTick(() => {
      setCraftDlg.value.setData(button.selectRecords[0]).open();
    });
  },
  setBom: function ({ button }) {
    dialog.value.editBom = true;
    nextTick(() => {
      editBomDlg.value.setData(button.selectRecords.map(V => V.main_id)).open();
    });
  },
};
</script>
